.scroll-texts {
    /* 'position:relative' allows the article section to be positioned in a custom way */
    position: relative;
    padding: 0 1rem;
    /* 'max-width' sets how wide each step's the text comes up on the screen */
    max-width: 20rem;
    /* 'OPTIONAL: margin-top' sets how much space there is between the the figure and the first message.*/
    margin-top: 0;
    /* 'margin-left:auto' and 'margin-right:auto' centers the article on the page.*/
    margin-left: auto;
    margin-right: auto;
    /* 'transform' is included to ensure z-index works properly on all kinds of devices */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 1;
}

/* .scroll-texts img {
    display: block;
    max-width: 70%;
    max-height: 300px;
    margin: 0 auto;
} */

.step {
    /* 'position relative' allows the steps to positioned in a custom way*/
    position: relative;
    /* margins are set to position step as high as possible, centered, and with a minimum bottom margin*/
    margin: 0 auto 0 auto;
    height: 100%;
    opacity: 0.9;
    top: 50%;
    z-index: 1;
    /* outline: yellowgreen dashed; */
}



.step p {
    /* 'position relative' allows the steps to positioned in a custom way*/
    position: relative;
    /*OPTIONAL: centers the text*/
    text-align: center;
    /*OPTIONAL: creates space around the text*/
    padding: 1rem;
    /*OPTIONAL: can be set based on preferences*/
    /* font-size: 2rem; */
    /*OPTIONAL: can be set based on preferences*/
    background-color: #f3f3f3;
    /*OPTIONAL: creates a solid box around the text*/
    border: 2px solid #282828;
    /*OPTIONAL: makes the text slightly see-through so that the figure is somewhat visible underneath*/
    opacity: 0.90;
    /* font-weight: bold; */
}

#last-step {
    height: 100%;
    margin-bottom: 0px;
}

/* ========== media-query ============= */

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
    .step p {
        font-size: 28px;
    }
    .step {
        width: 100%;
    }
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {
    .step p {
        font-size: 28px;
    }
    .step {
        width: 100%;
    }
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {
    .step p {
        font-size: 28px;
    }
    button[slot="ar-button"] {
        font-size: 24px;
    }
    .step {
        width: 70%;
    }
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .step p {
        font-size: 28px;
    }
    button[slot="ar-button"] {
        font-size: 24px;
    }
    .step {
        width: 25%;
    }
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {
    .step p {
        font-size: 28px;
    }
    button[slot="ar-button"] {
        font-size: 14px;
    }
    .step {
        width: 60%;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {
    .step p {
        font-size: 18px;
    }
    .step {
        width: 60%;
    }
    button[slot="ar-button"] {
        font-size: 10px;
    }
}

/* ========== media-query ============= */